/**
 * Created by LeonTao on 17/3/31.
 */

$('#upload-btn').click(function () {
    $(this).text('请稍等...');
    $('#upload-input').trigger('click');
});

$('#upload-input').on('change', function () {
    console.log('--- license upload input ---');
    readImage(this);
});


var imgHtml = '<div class="col-md-55"><div class="thumbnail"><div class="image view view-first"><img style="width: 100%; display: block;"  alt="image"/><div class="mask"><p>选择操作</p><div class="tools tools-bottom"><a class="modify"><i class="fa fa-pencil"></i></a><a class="remove"><i class="fa fa-times"></i></a></div></div></div><div class="caption"><p>Snow and Ice Incoming for the South</p></div></div></div>';

function readImage(input) {
    if (input.files && input.files[0]) {
        console.log('--- input --- ', input.files); //FileList {0: File, length: 1}

        var reader = new FileReader();

        reader.onload = function (e) {
            //append加载图片，展示图片，

            // var src = e.target.result;
            // var imgName = input.files[0].name;

            // create a FormData object which will be sent as the data payload in the
            // AJAX request
            var formData = new FormData();

            var imgFile = input.files[0];
            var imgName = imgFile.name;
            var jImg = $(imgHtml);

            formData.append('uploads[]', imgFile, imgName);
            var pTitle = jImg.find('.caption p');
            var img = jImg.find('.thumbnail .image img');
            var imgContent = $('.x_content .row');

            //先设置图片，再异步加载
            imgContent.append(jImg);

            $.ajax({
                url: '/image-upload',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function (res) {
                    console.log('upload successful! --- ' + res);
                    if (res.id == 1) {
                        //或者上传图片后返回的路径
                        pTitle.text(imgName); //设置图片标题
                        console.log('--- src --- ', res.src);
                        img.attr('src', res.src); //设置图片

                        $('#upload-btn').text('继续上传');
                    }

                },
                xhr: function () {
                    // create an XMLHttpRequest
                    var xhr = new XMLHttpRequest();

                    // listen to the 'progress' event
                    xhr.upload.addEventListener('progress', function (evt) {
                        if (evt.lengthComputable) {
                            // calculate the percentage of upload completed
                            var percentComplete = evt.loaded / evt.total;
                            percentComplete = parseInt(percentComplete * 100);

                            // update the Bootstrap progress bar with the new percentage
                            pTitle.text(imgName); //设置上传进度
                            // $('.progress-bar').text(percentComplete + '%');
                            // $('.progress-bar').width(percentComplete + '%');

                            // once the upload reaches 100%, set the progress bar text to done
                            if (percentComplete === 100) {
                                pTitle.text(imgName); //设置图片标题
                            }

                        }

                    }, false);
                    return xhr;
                }
            });


            //显示同时上传, 不行，如果在页面中显示这么多张图片的base64编码，会造成页面卡顿。
            // 还是先上传到服务器（显示进度），保存到指定路径，返回路径。最后设置img的src

            // pTitle.text(imgName); //设置图片标题
            // // console.log('--- src --- ', src);
            // // console.log(jImg.find('.thumbnail .image').attr('src'));
            // img.attr('src', src); //设置图片
            // imgContent.append(jImg);
            // $('#upload-btn').text('继续上传');

        };
        reader.readAsDataURL(input.files[0]);
    }
}

